<template>
  <div class="PC">
    
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.username" placeholder="请输入姓名" clearable />
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable />
      </el-form-item>

      <el-form-item label="部门">
        <el-input v-model="formInline.department" placeholder="请输入部门" clearable />
      </el-form-item>

      <el-form-item>
        <el-button style="background-color: #253963; color: #fff;" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :stripe="true" border="true">
      <el-table-column prop="username" label="姓名" />
      <el-table-column prop="id" label="工号" />
      <el-table-column prop="department" label="部门" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="employeestype" label="岗位" />
      <el-table-column prop="id" label="操作">
        <template #default="scope">
          <el-button   @click="cha(scope.row)"
            >详情</el-button
          >
          <el-button type="danger" @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class="move" style="padding-top: 20px;">
        <el-form :inline="true" :model="formInline" style="width: 90vw; margin: 0 auto;">
                <el-form-item label="姓名">
                    <el-input v-model="formInline.username" placeholder="请输入姓名" clearable />
                </el-form-item>
                
                <el-form-item label="手机号">
                    <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable />
                </el-form-item>

                <el-form-item label="部门">
                    <el-input v-model="formInline.department" placeholder="请输入部门" clearable />
                </el-form-item>
                <br />
                <el-form-item>
                    <el-button style="background-color: #253963; color: #fff;" @click="onSubmit">查询</el-button>
                </el-form-item>
        </el-form>

        <el-card style="max-width: 90vw;margin: 0 auto;margin-top: 10px; font-size: 14px;" v-for="item in tableData">
            <p>姓名：<span style="color: #bbb9b7;">{{ item.username }}</span></p>
            <p>工号：<span style="color: #bbb9b7;">{{ item.id }}</span></p>
            <p>部门：<span style="color: #bbb9b7;">{{ item.department }}</span></p>
            <p>手机号：<span style="color: #bbb9b7;">{{ item.phone }}</span></p>
            <p>岗位：<span style="color: #bbb9b7;">{{ item.employeestype }}</span></p>
            <template #footer>
              <el-button size="small" style="" @click="cha(item)"
              >详情</el-button
              >
              <el-button size="small"  style="background-color: red; color: #fff;" @click="del(item)"
                >删除</el-button
              >  
            </template>
        </el-card>

       </div>

  <Add title="员工详情" @change="colseAdd" :data="data" :dialogVisible="dialogVisible" />
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import Add from "../components/Add.vue";
import {
  getAllUsers,
  queryUserByMultiConditions,
  addTable,
  deleteUser,
} from "../utils/api";

interface UserType {
  id: string;
  username: string;
  phone: string;
  department: string;
  employeestype: string;
}

const dialogVisible = ref(false);
const tableData = ref<UserType[]>([]);
const data = ref<UserType | null>(null);

const getData = async () => {
  tableData.value = await getAllUsers();
};

onMounted(() => {
  getData();
});

interface formInlineTS {
  username: string;
  phone: string;
  department: string;
}

const formInline: formInlineTS = reactive({
  username: "",
  phone: "",
  department: "",
});

const onSubmit = async () => {
  tableData.value = await queryUserByMultiConditions(formInline);
};
const colseAdd = (val: boolean) => {
  dialogVisible.value = val;
};
const cha = (value) => {
  dialogVisible.value = true;
  data.value = value;
};
const del = async (value) => {
  await deleteUser(value.id);
  getData();
};

// const colseAdd = (val: boolean) => {
//   dialogVisible.value = val;
// };

// const cha = (value: UserType) => {
//   dialogVisible.value = true;
//   data.value = value;
// };

// const del = async (value: UserType) => {
//   await deleteUser(value.id);
//   tableData.value = tableData.value.filter((v) => v.id != value.id);
// };
</script>

<style scoped>
@media (max-width:1000px) {
  .PC{
    display: none;
  }
  .move{
    display: block;
  }
}
@media (min-width:1000px) {
  .PC{
    display: block;
  }
  .move{
    display: none;
  }
}


.demo-form-inline {
  margin-top: 30px;
}
</style>
